<template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="产品名称" prop="productName">
            <el-input v-model="form.productName" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="商品编号" prop="productCode">
            <el-input v-model="form.productSn" placeholder="请输入商品编号" />
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
            <el-input-number v-model="form.price" :precision="2" :step="1" />
        </el-form-item>
        <el-form-item label="商品分类" prop="productCategoryId">
            <el-select v-model="form.productCategoryId" placeholder="请选择商品分类">
                <el-option v-for="item in categoryOptions" :key="item.categoryId" :label="item.categoryName"
                    :value="item.categoryId" />
            </el-select>
        </el-form-item>
        <el-form-item label="商品描述" prop="productDescription">
            <el-input v-model="form.productDescription" type="textarea" placeholder="请输入商品描述" />
        </el-form-item>
        <el-form-item label="主图URL" prop="imageUrl">
            <el-input v-model="form.imageUrl" placeholder="请输入主图URL" />
        </el-form-item>
        <el-form-item label="详情图URL" prop="detailUrl">
            <el-input v-model="form.detailUrl" placeholder="请输入详情图URL" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">确定</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { listCategory } from '@/api/category'
import { getProduct } from '@/api/product'

const props = defineProps<{
    productId: number
}>()

// =========== 定义接口 ===========
interface Category {
    categoryId: number
    categoryName: string
}

interface FormInstance {
    validate: (callback: (valid: boolean) => void) => void
    resetFields: () => void
}

// =========== 定义响应式数据 ===========
const formRef = ref<FormInstance | null>(null)
const form = reactive({
    productName: '',
    productSn: '',
    price: 0,
    productCategoryId: null,
    productDescription: '',
    imageUrl: '',
    detailUrl: '',
})
const categoryOptions = ref<Category[]>([])

const rules = {
    productName: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
    productSn: [{ required: true, message: '商品编号不能为空', trigger: 'blur' }],
    price: [{ required: true, message: '商品价格不能为空', trigger: 'blur' }],
    productCategoryId: [{ required: true, message: '商品分类不能为空', trigger: 'change' }],
}

// =========== 生命周期钩子 ===========
onMounted(() => {
    getCategoryList()
    init()
})

watch(() => props.productId, () => {
    init()
})

function init() {
    if (props.productId) {
        getProduct(props.productId).then((res) => {
            form.productName = res.data.productName
            form.productSn = res.data.productSn
            form.price = res.data.price
            form.productCategoryId = res.data.productCategoryId
            form.productDescription = res.data.productDescription
            form.imageUrl = res.data.imageUrl
            form.detailUrl = res.data.detailUrl
        })
    } else {
        // 如果 productId 为空，则重置表单
        form.productName = ''
        form.productSn = ''
        form.price = 0
        form.productCategoryId = null
        form.productDescription = ''
        form.imageUrl = ''
        form.detailUrl = ''
    }
}

// =========== 方法 ===========
/** 获取类别列表 */
function getCategoryList() {
    listCategory().then((res) => {
        categoryOptions.value = res.data
    })
}

/** 提交表单 */
function submitForm() {
    if (!formRef.value) return
    formRef.value.validate((valid: boolean) => {
        if (valid) {
            ElMessage.success('提交成功')
            // 此处应添加调用新增/修改API的逻辑
        }
    })
}

/** 重置表单 */
function resetForm() {
    if (!formRef.value) return
    formRef.value.resetFields()
}
</script>